<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2019/4/8
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->
<template>
  <el-dialog
    :visible.sync="Show"
    title="给消息接受人配置推送规则"
    :fullscreen='true'
    :show-close='false' custom-class="notic-rulelist-fulldialog"
    :close-on-press-escape="false">
      <span class="custom-dialog-btn" @click="cancel">
        <i class="el-icon-close"></i>
      </span>
      <div class="notic-rulelist-roles">
        <span>用户名：{{noticRuleObj.username}}</span>
        <span>真实姓名：{{noticRuleObj.name}}</span>
        <span>手机号：{{noticRuleObj.mobilePhone}}</span>
        <span>角色：{{noticRuleObj.groupName}}</span>
      </div>
      <div class="notic-handle-table">
        <el-table key='tableKey' :data="list" v-loading="listLoading" fit style="width: 100%">
          <el-table-column label="推送规则">
            <template slot-scope="scope">
              <span>{{scope.row.ruleName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="规则描述">
            <template slot-scope="scope">
              <span>{{scope.row.ruleDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属系统">
            <template slot-scope="scope">
              <span>{{scope.row.channelName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="推送间隔">
            <template slot-scope="scope">
              <span>{{scope.row.intervalTimeTxt}}</span>
            </template>
          </el-table-column>
          <el-table-column label="启用状态" width="180">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isStop" active-value="0" inactive-value="1" @change="changeStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
  </el-dialog>
</template>
<script>
  import {
    getlistUserPage,
    changeUserStatus
  } from "@/api/datahandler/noticeRule/index";
  export default{
    props:{
      Show:{
        type:Boolean,
        default:false,
      },
      noticRuleObj:{
        type:Object,
      }
    },
    data(){
      return{
        list:[],
        listQuery: {
          page: 1,
          limit: 10,
        },
        total:0,
        listLoading:false
      }
    },
    methods:{
      cancel(){
        this.$emit("update:Show",false);
        this.$emit("sureReceive");
      },
      getList(){
        this.listLoading = true;
        this.listQuery.userId = this.noticRuleObj.id;
        this.listQuery.noticeType = this.noticRuleObj.noticeType;
        getlistUserPage(this.listQuery).then(res=>{
          this.list = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      changeStatus(row){
        changeUserStatus({noticeRuleId:row.id,userId:this.noticRuleObj.id,status:row.isStop,noticeType:this.noticRuleObj.noticeType}).then(res=>{
            if (res.status===200){
              this.getList();
            }
        })
      }
    },
    watch:{
      Show:function(val){
        let self=this;
        if (val) {
          self.getList()
        }
      }
    }
  }
</script>
<style lang="scss">
  .notic-rulelist-fulldialog > div {
    width: 80%;
    margin: 0 auto;
    padding-top: 0;
  }
  .notic-rulelist-fulldialog{
    .el-dialog__title {
      font-size: 32px;
    }
    .el-dialog__header {
      margin-top: 40px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 24px;
      top: 14px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .notic-rulelist-roles{
      padding: 10px 0 20px;
      color: rgba(255,255,255,.7);
      span{
        padding: 0 12px;
        border-left: 1px solid rgba(255,255,255,.7);
        &:first-child{
          border-left: 0;
          padding-left: 0;
        }
      }
    }
  }
</style>
